<!--
 * @Author: QUAN
 * @Date: 2021-08-27 16:16:47
 * @LastEditTime: 2021-09-01 15:12:56
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-ketang-pc-mis\src\views\MallOrder\components\Logistics.vue
-->
<template>
  <div class="logistics">
    <div class="content" v-if="logisticData.length > 0">
      <h3>物流信息</h3>
      <p class="info-orderId">
        <img
          v-if="false"
          src="https://himg.bdimg.com/sys/portrait/item/public.1.d6a6b5c9.aY5A3CionCS2xr04oTFVyw.jpg"
          alt=""
        />
        <span>{{ $selectFormat['mallOrderKDSl'](expressageCompany).label }}</span>
        <span>{{ orderId }}</span>
      </p>
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in logisticData"
          :key="index"
          type="primary"
          :timestamp="activity.time"
        >
          {{ activity.context }}
        </el-timeline-item>
      </el-timeline>
    </div>
    <div v-else class="content">
      <h3>物流信息</h3>
      {{ mess }}
    </div>
    <div class="after-box" v-if="!isTetail">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save" :loading="saveLoading">确 认</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['info', 'isTetail'],
    data() {
      return {
        // 物流数据
        logisticData: [],
        // 订单编号
        orderId: '',
        // 快递公司
        expressageCompany: '',
        // 返回的提示语
        mess: '',
        // 保存loading
        saveLoading: false,
      };
    },
    watch: {
      'info.orderId': {
        handler(val) {
          this.getData();
        },
        deep: true,
        immediate: true,
      },
    },
    created() {},
    methods: {
      // 得到物流数据
      getData() {
        if (this.info.orderId) {
          this.$service
            .MallOrderLogistic({ orderId: this.info.orderId })
            .then((res) => {
              if (res.message === 'ok') {
                this.logisticData = res.data;
                this.expressageCompany = res.com;
                this.orderId = res.nu;
              } else {
                this.mess = res.message;
                this.logisticData = [];
                this.expressageCompany = [];
                this.orderId = [];
              }
            })
            .catch((err) => {});
        }
      },
      // 关闭
      close() {
        this.$emit('dialogCancel');
      },
      // 保存
      save() {
        this.$emit('dialogSubmit');
      },
    },
  };
</script>
<style lang="less" scoped>
  .logistics {
    .content {
      padding: 0px 20px;
      .info-orderId {
        margin-top: 10px;
        img {
          display: inline-block;
          width: 60px;
          height: 60px;
          vertical-align: middle;
        }
        span {
          margin-left: 15px;
        }
      }
      /deep/ .el-timeline {
        margin-top: 20px;
      }
    }
    .after-box {
      text-align: right;
      margin-top: 20px;
    }
  }
</style>
